<script setup lang="ts">
  import { ref, watchEffect } from 'vue';
  import type { ModalProps } from 'ant-design-vue';
  interface Props extends ModalProps {
    visible?: boolean;
    onOk?: () => Promise<void>;
  }
  const emit = defineEmits(['update:visible', 'ok']);
  const props = defineProps<Props>();
  const show = ref(props.visible);
  const okLoading = ref(false);
  const onUpdateVisible = (e: boolean) => {
    show.value = e;
    setTimeout(() => {
      emit('update:visible', e);
    }, 300);
  };
  const onSubmit = async () => {
    // 确定提交
    if (props.onOk) {
      try {
        okLoading.value = true;
        await props.onOk();
        okLoading.value = false;
      } catch (error) {
        okLoading.value = false;
      }
    }
  };
  watchEffect(() => {
    show.value = props.visible;
  });
</script>

<template>
  <a-modal :visible="show" @update:visible="onUpdateVisible" :mask-closable="false">
    <template #footer>
      <n-space :size="10" justify="end">
        <n-button type="default" @click="onUpdateVisible(false)">取消</n-button>
        <n-button type="primary" :loading="okLoading" @click="onSubmit">确定</n-button>
      </n-space>
    </template>
    <template #[item] v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item"></slot>
    </template>
    <slot></slot>
  </a-modal>
</template>

<style scoped></style>
